<template>
  <el-dialog width="30%" title="添加/编辑菜单" :visible.sync="menuDialog" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="menu" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="上级菜单">
        <el-select v-model="menu.parentId" filterable clearable placeholder="请选择">
          <el-option v-for="item in pMenus" :key="item.menuId" :label="item.menuName" :value="item.menuId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址" prop="menuUrl">
        <el-input v-model="menu.menuUrl" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="menu.type" clearable placeholder="显示">
          <el-option v-for="item in [{id:1,label:'菜单'},{id:2,label:'按钮'},{id:3,label:'其他'}]" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="menu.menuName" placeholder="菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="菜单顺序">
        <el-input v-model="menu.sqe" placeholder="菜单顺序"></el-input>
      </el-form-item>
      <el-form-item label="禁用">
        <el-switch  v-model="menu.status" :active-value="0" :inactive-value="1">
        </el-switch>
      </el-form-item>
      <!-- <el-form-item label="叶子节点">
        <el-switch style="display: block" v-model="menu.hasChildren" active-color="#13ce66" inactive-color="#ff4949" active-="是" inactive-text="否">
        </el-switch>
      </el-form-item> -->
    </el-form>
    <div slot="footer">
      <el-button @click="closeHandler()">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {menusUrl,menuSaveUrl} from "@/utils/common"

export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    popMenu: {
      type: Object,
      default: null
    }
  },
  watch: {
    dialog() {
      this.menuDialog = this.dialog;
    },
    popMenu() {
      this.menu = this.popMenu;
    }
  },
  data() {
    return {
      menu: {
        menuId: "",
        menuName: null,
        parentId: 0,
        level:0,
        menuUrl: "",
        status: 1,
        type: ""
      },
      pMenus: [],
      rules: {
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" }
        ]
      },
      menuDialog: false
    };
  },
  mounted() {
    this.loadParentMenu();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveMenu();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveMenu: function () {
      if (!this.menu.menuParent) {
        this.menu.menuParent = 0
      }
      this.axios
        .post(menuSaveUrl, this.menu)
        .then(response => {
          if (response.data.status=="SUCCESS") {
            this.$message.success("菜单更新成功");
            this.$emit("close");
            this.$emit("load");

          } else if (response.data.code == 201) {
            this.$message.error(response.data.msg);
          }
        })
        .catch(response => {
          console.log("response -   " + response);
        });
    },
    loadParentMenu() {
      this.axios
        .post(menusUrl+"0")
        .then(rs => {
          this.pMenus = rs.data.data;
        })
        .catch(() => {
          this.$message.error("加载失败");
        });
    },
    closeHandler() {
      this.$emit("close");
    }

  }
};
</script>
<style lang="less" scoped>
.el-select {
  width: 100%;
}
/deep/.el-form-item__content{
  text-align: left;
  padding: 0 10px;
}
</style>
